body{
    max-width: 540px;
    min-width: 320px;
    width: 100%;
    line-height: 1.5;
    font-size: 14px;
    margin: 0 auto;
    color: #666;
    background-color: #f6f6f6;
    /* background-color: #ccc; */
    font-family: -apple-system,Helvetica,sans-serif;
} 
*{
    margin: 0px;
    padding: 0px;
}  
header{
    max-width: 540px;
    min-width: 320px;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    // height: 152px;
    background-color: #232326;
    >ul{
        list-style: none;
        width: 100%;
        height: 100%;
        display: flex;
        >li:nth-child(1){
            display: flex;
            align-items: center;
            justify-content: center;
            width: 8%;
            >img{
                height: 16px;
            }
        }
        >li:nth-child(2){
            width: 12%;
            display: flex;
            align-items: center;
            justify-content: center;
            >img{
                width: 35px;
                height: 35px;
            }
        }
        >li:nth-child(3){
            padding-left: 10px;
            box-sizing: border-box;
            width: 55%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            >span:nth-child(1){
                font-size: 12px;
                color: #fff;
            }
            >span:nth-child(2){
                font-size: 12px;
                color: #999999;
            }
           

        }
        >li:last-child{
            width: 25%;
            background-color: #cd2525;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            >a{
                color: #fff;
                list-style: none;
            }
        }
    }
}
a{
    color: #666;
}

.log-con{
    margin-top: 50px;
    max-width: 540px;
    min-width: 320px;
    width: 100%;
    height: 257px;
    background-image: url("../upload/banner.dpg");
    background-size:100% 100%;
}

.ss{
    width: 100%;
    display: flex;
    height: 60px;
    // background-color:#242e69 ;
    >div{
        // background-color: olive;
        width:60px ;
    }
    >div:first-child{
        display: flex;
        align-items: center;
        justify-content: center;
       
        >img{
            width: 35px;
            height: 35px;

        }
    }
    >div:last-child{
        font-size: 25px;
        color: #fff;
        text-align: center;
        line-height: 60px;
    }


    >.inpu{
        box-sizing: border-box;
        padding:7px ;
        padding-left: 16px;
        margin-top: 10px;
        height: calc(100% - 20px);
        background-color: orange;
        flex:1;
        background-color: #fff;
        border: 0px;
        outline: 0px;
        border-radius: 32px;
        display: flex;
        >div:nth-child(1){
            height: 25px;
            width: 80px;
            // background-color: cornflowerblue;
            display: flex;
            >div{
                flex: 50%;
            }
            >div:nth-child(1){
                border-right: 2px solid #999999;
                >img{
                    width: 30px;
                    height: 24px;
                }
            }
            >div:nth-child(2){
                box-sizing: border-box;
                margin-left: 7px;
                width: 29px;
                height: 28px;
                background-image: url("../images/jd-sprites.png");
                background-position:-140px 0px ;
               
               
            }
           
        }
        >div:nth-child(2){
            flex: 1;
            height: 22px;
            >input{
                padding-left: 15px;
                width: calc(100% - 15px);
                height: 100%;
                color: #9f9f9f;
                font-weight: bold;
                font-size: 20px;
                border: 0px;
                outline: 0px;
            }
        }

    }
}
.log-img{
    width: calc(100% - 32px);
    max-width: 540px;
    min-width: 320px;
    height: 124px;
    margin: 20px auto;
    display: flex;
    >div{
        flex:33.333%;
        height: 100%;
        >img{
            width: 100%;
            height: 100%;
        }
    }

}
.nav-lis{
    box-sizing: border-box;
    padding-left: 45px;
    // background-color: chartreuse;
    margin: 20px auto;
    width: calc(100% - 24px);
    max-width: 540px;
    min-width: 320px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;

    >div{
        // background-color: chocolate;
        flex: 20%;
        height: 90px;
        font-size: 15px;
        color: #000;
        >i{
            // background-color: palevioletred;
            display: block;
            width: 45px;
            height: 45px;
            margin-bottom: 24px;
            
            >img{
                width: 45px;
            height: 45px;

            }
        }
    }
   
}
.conter{
    margin: 0px auto;
    margin-bottom: 70px;
    width: calc(100% - 32px);
    max-width: 540px;
    min-width: 320px;
    display: flex;
    flex-wrap: wrap;
    background-color: #f6f6f6;
    >ul{
        list-style: none;
        flex:45%;
        height:400px ;
       background-color: #fff;
       border-radius: 25px;
       margin-right: 20px;
       margin-bottom: 20px;
       overflow: hidden;
       >li:first-child{
           height: 258px;
           width: 100%;
            >img{
                width: 100%;
                height: 100%;
            }
       }
       >li:nth-child(2){
           height: 50px;
           font-size: 14px;
           color: #000;
           >img{
               width:30px ;
               height: 16px;
               border-radius: 3px;
           }
       }

       >li:nth-child(3){
           height: 32px;
           width: 100%;
        //    background-color:palevioletred ;
           line-height: 32px;
           >.meney{
               display: block;
               height: 100%;
               width: 135px;
               float: left;
               color:#ff4c1e ;
               >div{
                   margin-top: 4px;
                   float: right;
                   box-sizing: border-box;
                   height: 25px;
                   line-height: 25px;
                   text-align: center;
                   width: 45px;
                   font-size: 17px;
                   border:3px solid #ff4c1e;
                   border-radius: 5px;

               }
           }
           >.look{
               margin-top: 4px;
               float: right;
               text-align: center;
               width: 60px;
               height: 25px;
               line-height: 30px;
               background-color:#f0f2f5 ;
               border-radius: 12.5px;
           }
       }
    

    }
    >ul:nth-child(2){
        margin-right: 0;
    }
    >ul:nth-child(4){
        margin-right: 0;
    }
}
.footer{
    max-width: 540px;
    min-width: 320px;
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    display: flex;
    >div{
        flex:20%;
        height: 100%;
        >img{
            width: 100%;
            height: 100%;
        }
    }
    
}